<template>
	<view >
		<u-navbar
		:autoBack="true" bgColor="var(--theme)"
		leftIconColor='#fff'
		:titleStyle="{ color: '#fff'}"
		 title="编辑资料" rightText='' :border="false" :placeholder="true">
			<!-- <view slot="left"></view> -->
			<!-- <view slot="right" style="display: flex;">
				<u-icon name="clock" color="#fff" size="16" style="margin: 0 5px;"></u-icon>
				<u-icon name="plus-circle" color="#fff" size="16"></u-icon>
			</view> -->
		</u-navbar>
		 <view class="headBg  p20">
			 <view class="f-s-b">
			 	<view class="f-c">
			 		 <u-avatar src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/head.png"  size="68"></u-avatar>
			 	</view>
			 	<view class="cf">
			 		<view class="">菜狗一号 155****552</view>
					<view class="f-c mt20">
						<u-icon name="map" color="#fff" size="16"></u-icon>
						<span class="ml10">安徽省 滁州市,琅琊区</span>
					</view>
			 	</view>
			 	<view class="">
			 		<u-icon name="arrow-right" color="#fff" size="24"></u-icon>
			 	</view>
			 </view>
		 	 
		 </view>
		 <view class="mainBox ">
		 	<view class="c3 f36">
		 		VFZ 无线充电音乐台灯多功能小夜灯蓝牙音
		 		箱床头氛围灯
		 	</view>
			<view class="f-s-b mt40">
				<u--image :showLoading="true" src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/pro3.png" width="80px" height="80px"></u--image>
			    <view class="f1 f-f-c ml20">
				      <view class="f-s-b">
						<span class="c3">规格</span>
						<span class="c9 f28 f1 ml20">音箱款 奶茶棕</span>
						<span class="c9 f28">x{{num}}</span>
				      </view>
					  <view class="f-s-b mt40">
					  	<span class="cr f44 fb">￥{{400*num}}.00</span>
						<view class="f-c">
							<image v-show="num>1" @click="num -- "  src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/red.png" style="width: 48rpx;" mode="widthFix"></image>
							<span class="m20">{{num}}</span>
							<image @click="num ++ " src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/add.png" style="width: 48rpx;" mode="widthFix"></image>
						</view>
					  </view>
			    </view>
			</view>
		 </view>
		 <view class="payList p20 mt40 b-s b-rd c3">
		 	 <view class="f-s-b" @click="paytype = 1">
				<image src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/wx.png" style="width: 48rpx;" mode="widthFix"></image>
		 	 	<span class="f1 ml20">微信</span>
				<image v-if="paytype == 1" src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/radio_s.png" style="width: 36rpx;" mode="widthFix"></image>
				<image v-else src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/radio.png" style="width: 36rpx;" mode="widthFix"></image>
				
		 	 </view>
			 <view class="f-s-b mt40" @click="paytype = 2">
			 	<image src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/balance.png" style="width: 48rpx;" mode="widthFix"></image>
			 	<span class="f1 ml20">余额</span>
			 	<image v-if="paytype == 2" src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/radio_s.png" style="width: 36rpx;" mode="widthFix"></image>
			 	<image v-else src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/radio.png" style="width: 36rpx;" mode="widthFix"></image>
			 </view>
			 <view class="f-s-b mt40" @click="paytype = 3">
			 	<image src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/point.png" style="width: 48rpx;" mode="widthFix"></image>
			 	<span class="f1 ml20">积分</span>
			 	<image v-if="paytype == 3" src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/radio_s.png" style="width: 36rpx;" mode="widthFix"></image>
			 	<image v-else src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/radio.png" style="width: 36rpx;" mode="widthFix"></image>
			 </view>
		 </view>
		 
		 <view class="sureBtn" >立即支付 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{
					name:'菜狗一号',
					sex:'男',
					birth:'2000.10.10',
					address:'安徽省 合肥市 庐阳区',
				},
				paytype:1,
				num:1,
			}
		},
		onShow() {
			// uni.hideBackButton()
		},
		mounted() {
			  var backbutton = document.getElementsByClassName('uni-page-head-btn')[0]
			 if(backbutton) backbutton.style.backgroundColor = 'rgb(0,0,0,0)';
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		// padding-top: 16upx;
		display: flex;
		flex-direction: column;
		::v-deep  .uni-page-head-btn  {
			background-color: #000 !important;
		}
	}
    .headBg{
		background-image: url('https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/homebg.png');
		background-size: 100% 100%;
		// width: 750rpx;
		height: 378rpx;
		// background: #1AC388;
		border-radius: 0rpx 0rpx 40rpx 40rpx;
		opacity: 1;
	}
	.outBtn{
		position: fixed;
		bottom: 200rpx;
		left: 50%;
		transform: translate(-50%,0);
		width: 700rpx;
		height: 88rpx;
		background: #F14647;
		box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0,0,0,0.16);
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		opacity: 1;
		text-align: center;
		line-height: 88rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
	.mainBox{
		margin-top: -200rpx;
		// width: 750rpx;
		height: 362rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 8rpx 2rpx rgba(0,0,0,0.1);
		border-radius: 40rpx 40rpx 8rpx 8rpx;
		opacity: 1;
		padding: 30rpx 40rpx 36rpx;
	}
	.fixsure{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 156rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 8rpx 2rpx rgba(0,0,0,0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
	}
	.btnsure{
		width: 318rpx;
		height: 90rpx;
		background: var(--theme);
		border-radius: 46rpx 46rpx 46rpx 46rpx;
		text-align: center;
		line-height: 90rpx;
		color: #FFFFFF;
	}
	
</style>
